<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="keywords" content="#">
    <meta name="description" content="#">
    <title>景点</title>
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.ico">
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Fontawesome -->
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <!-- Flaticons -->
    <link href="assets/css/font/flaticon.css" rel="stylesheet">
    <!-- Slick Slider -->
    <link href="assets/css/slick.css" rel="stylesheet">
    <!-- Range Slider -->
    <link href="assets/css/ion.rangeSlider.min.css" rel="stylesheet">
    <!-- Datepicker -->
    <link href="assets/css/datepicker.css" rel="stylesheet">
    <!-- magnific popup -->
    <link href="assets/css/magnific-popup.css" rel="stylesheet">
    <!-- Nice Select -->
    <link href="assets/css/nice-select.css" rel="stylesheet">
    <!-- Custom Stylesheet -->
    <link href="assets/css/style.css" rel="stylesheet">
    <!-- Custom Responsive -->
    <link href="assets/css/responsive.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
    <!-- CSS for IE -->
    <!--[if lte IE 9]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->   
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
    <!-- place -->
</head>
<body>
    <!-- Start Header -->
    <header class="header">
        <!-- Topbar -->
        <div class="topbar bg-custom-blue">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="left-side">
                            <ul class="custom-flex">
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-linkedin"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6">
						<div class="right-side">
							<ul class="custom-flex" id="custom-flex">
							
								
							</ul>
						</div>
					</div>
                </div>
            </div>
        </div>
        <!-- Topbar -->
        <!-- Navigation -->
        <div class="navigation">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="main-navigation">
                            <div class="logo">
                                <a href="index.html">
                                     <img src="assets/images/TuYang-logo.png" class="img-fluid image-fit" alt="img">
                                </a>
                            </div>
                            <div class="main-menu">
                                <div class="logo">
                                    <a href="index.html">
                                        <img src="assets/images/toor-logo.png" class="img-fluid image-fit" alt="img">
                                    </a>
                                </div>
                                <nav>
                                    <ul class="custom-flex">
                                        <li class="menu-item">
                                            <a href="index.jsp" class="text-light-dark">首页</a>
                                            
                                        </li>
                                        <li class="menu-item ">
                                            <a href="rooms-hotels.jsp" class="text-light-dark">酒店</a>
                                            
                                        </li>
                                        <li class="menu-item active">
                                            <a href="scenic.jsp" class="text-light-dark">景点</a>
                                            
                                        </li>
                                        
                                        <li class="menu-item">
                                            <a href="order.jsp" class="text-light-dark">我的订单</a>
                                        </li>
                                        <li class="menu-item">
                                            <a href="gallery.jsp" class="text-light-dark">我的收藏</a>
                                            
                                        </li>
                                        <li class="menu-item">
                                            <a href="person-center.jsp" class="text-light-dark">个人中心</a>
                                           
                                        </li>
                                    </ul>
                                </nav>
                                
                            </div>
                            <div class="hamburger-menu">
                                <div class="menu-btn">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Navigation -->
    </header>
    <!-- End Header -->
    <!-- Start Subheader -->
    <div class="subheader normal-bg section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="text-custom-white">Scenic</h1>
                    <ul class="custom-flex justify-content-center">
                        <li class="fw-500">
                            <a href="index.jsp" class="text-custom-white">Home</a>
                        </li>
                        <li class="active fw-500">
                            	景点
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Subheader -->
    <!-- Start Blog -->
    <section class="section-padding bg-light-white">
        <div class="container">
            <div class="row">
            
                <aside class="col-lg-4">
                    <div class="sidebar_wrap mb-md-80">
                        <div class="sidebar" >
                            <div class="sidebar_widgets mb-xl-30" style="height:300px;">
                                <div class="widget_title bg-custom-blue">
                                    <h5 class="no-margin text-custom-white">景点搜索</h5>
                                </div>
                                <form>
                                    <div class="form-group" style="margin-top:50px;">
                                        <input id="scenicName" type="search" name="#" class="form-control form-control-custom" id="scenicName" placeholder="输入景点、主题">
                                    </div>
                                    
                                    <button id="search-button" type="button" class="btn-first btn-submit full-width btn-height" style="float:left;margin-top:50px;width:150px">搜索</button>
                                    <button id="clear-search-button" type="button" class="btn-first btn-submit full-width btn-height" style="float:left;margin-top:50px;width:150px">清空</button>
                                </form>
                            </div>
                		</div>
                		</div>
                </aside>
                
                
                <div class="col-lg-8">
                
                    <div class="row"  id="showScenic">
<!-- 	                        <div class="col-md-6"> -->
<!-- 	                            <div class="flights-grid mb-xl-30"> -->
<!-- 	                                <div class="flights-grid-wrapper bx-wrapper"> -->
<!-- 	                                    <div class="animate-img"> -->
<!-- 	                                        <a href="#"> -->
<!-- 	                                            <img src="assets/images/flights/1.jpg" class="full-width" alt="img"> -->
<!-- 	                                        </a> -->
<!-- 	                                    </div> -->
<!-- 	                                    <div class="flights-grid-caption padding-20 bg-custom-white p-relative"> -->
<!-- 	                                        <div class="heading-sec"> -->
<!-- 	                                            <div class="left-side"> -->
<!-- 	                                                <div class="title"> -->
<!-- 	                                                    <h4 class="fs-16"> -->
<!-- 	                                                        <span class="text-light-dark">景点名称</span> -->
<!-- 	                                                    </h4> -->
<!-- 	                                                </div> -->
<!-- 	                                            </div> -->
<!-- 	                                            <div class="right-side">￥景点门票</span> -->
<!-- 	                                            </div> -->
<!-- 	                                        </div> -->
<!-- 	                                        <div class="action"> -->
<!-- 	                                            <a class="btn-second btn-small" href="#" tabindex="-1">详情</a> -->
<!-- 	                                            <a class="btn-first btn-submit" href="#" tabindex="-1">收藏</a> -->
<!-- 	                                        </div> -->
<!-- 	                                    </div> -->
<!-- 	                                </div> -->
<!-- 	                            </div> -->
<!-- 	                      </div>   -->
	                    </div>  
                        
                    <div class="row">
                        <div class="col-12" style="margin-top: -30px;margin-left:-50px;">
                            <nav class="section-padding-top">
                                <ul class="pagination justify-content-center" id="showPage">
                                    <li class="page-item"><a class="page-link" href="#">首页</a></li>
                                    <li class="page-item"><a class="page-link" href="#">上一页</a></li>
                                    <li class="page-item"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item active"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item"><a class="page-link" href="#">下一页</a></li>
                                    <li class="page-item"><a class="page-link" href="#">尾页</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                    
                    
               
            </div>
        </div>
        </div>
    </section>
    <!-- End Blog -->
    <!-- Start Partners -->
    
    <!-- End Partners -->
    <!-- Start Footer -->
    <footer class="section-padding footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-md-40">
                        <h4 class="text-custom-white fw-600">About Us</h4>
                        <p class="text-custom-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        <p class="text-custom-white">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry...
                        </p>
                        <ul class="custom-flex socials">
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-linkedin"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-youtube"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-md-40">
                        <h4 class="text-custom-white fw-600">Quick Links</h4>
                        <ul class="custom links">
                            <li>
                                <a href="#" class="text-custom-white">Home</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Hotels</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Flights</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Cruise</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Blog</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">404</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-sm-40">
                        <h4 class="text-custom-white fw-600">Instagram</h4>
                        <ul class="custom instagram " style="position: relative; height: 204px;">
                            <li style="position: absolute; left: 0px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_1.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_2.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_3.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 0px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_4.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_5.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_6.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 0px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_7.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_8.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_9.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-sm-40">
                        <h4 class="text-custom-white fw-600">Newsletter</h4>
                        <div class="newsletter">
                            <p class="text-custom-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- End Footer -->
    <!-- Start Copyright -->
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p class="text-custom-white">Copyright &copy; 2020.Company name All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- End Copyright -->
    <div id="back-top" class="back-top">
      <a href="#top"><i class="flaticon-arrows"></i></a>
    </div>
    <!-- Place all Scripts Here -->
    <!-- jQuery -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- Popper -->
    <script src="assets/js/popper.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Range Slider -->
    <script src="assets/js/ion.rangeSlider.min.js"></script>
    <!-- Slick Slider -->
    <script src="assets/js/slick.min.js"></script>
    <!-- Datepicker -->
    <script src="assets/js/datepicker.js"></script>
    <script src="assets/js/datepicker.en.js"></script>
    <!-- Isotope Gallery -->
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <!-- Nice Select -->
    <script src="assets/js/jquery.nice-select.js"></script>
    <!-- magnific popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <!-- Maps -->
    <script src="https://ditu.google.cn/maps/api/js?key=AIzaSyDnd9JwZvXty-1gHZihMoFhJtCXmHfeRQg"></script>
    <!-- Custom Js -->
    <script src="assets/js/custom.js"></script>
    <!-- /Place all Scripts Here -->
</body>

<script>

$(document).ready(function(){
	//显示用户名和用户图片
	var user ="${sessionScope.user}";
	if(user!=""&&"${sessionScope.user.userPicture}"==null){
		$("#custom-flex").html("<li><img src=\"${pageContext.request.contextPath}/assets/images/dahaigui.jpg\"><li><li>用户名："+"${sessionScope.user.userName}"+"</li>");
	}else if(user!=""&&"${sessionScope.user.userPicture}"!=null){
		$("#custom-flex").html("<li><img style=\"width:30px;height:30px;  \" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+
				"${sessionScope.user.userPicture}"+"\"><li>"+
				"<li>用户名："+"${sessionScope.user.userName}"+
				"<span style=\"margin-left:60px;cursor:pointer;\" id=\"btnLogout\">退出登录</span>"+
				"</li>");
	}else if(user==""){
		$("#custom-flex").html("<li><a href=\"userLogin.jsp\" class=\"text-custom-white\">登录</a></li>"+
				"<li><a href=\"register.jsp\" class=\"text-custom-white\">注册</a></li>");
	}
	
	//页面一进入,发起异步请求,景点列表
 	sendAJAX(1);
	
 	 // 搜索事件
	 $(document).on("click","#search-button",function(){
		 console.log( $("#scenicName").val());
		// 调用发送请求方法,参数页码
		sendAJAX(1);		
	 });
	 
	// 首页
	 $(document).on("click","#DataTables_Table_0_first",function(){
		 
		 // 获取当前页码
		 var pageNum = $("#pageInfo").data("pagenum");	 
		 console.log(pageNum);
		 // 判断
		 if(pageNum == 1){
			 alert("已经是首页");		
		 }else{
			 // 调用发送请求方法,参数页码
			 sendAJAX(1);
		 }	
	 });
	 
	 // 上一页
	 $(document).on("click","#DataTables_Table_0_previous",function(){
		 // 获取当前页码
		 var pageNum = $("#pageInfo").data("pagenum") -1;
		 
		 if(pageNum <1){
			 // 拦截请求
			 alert("已经是第一页");
		 }else{
			// 调用发送请求方法,参数页码
			 sendAJAX(pageNum);
		 }
 	})
 	
 	 // 下一页
	 $(document).on("click","#DataTables_Table_0_next",function(){
		 // 获取当前页码
		 var pageNum = eval($("#pageInfo").data("pagenum") + 1);		 
		 // 获取最大页码
		 var pages = $("#pageInfo").data("pages");
		 
		 if(pageNum > pages){
			 // 拦截请求
			 alert("已经是最后一页");
		 }else{
			// 调用发送请求方法,参数页码
			 sendAJAX(pageNum);
		 }
 	})
 	
 	 // 尾页
	 $(document).on("click","#DataTables_Table_0_last",function(){
		 // 获取当前页码
		 var pageNum = $("#pageInfo").data("pagenum");	 
		 // 获取最大页码
		 var pages = $("#pageInfo").data("pages");
	 
		 if(pageNum == pages){
			 // 拦截请求
			 alert("已经是尾页");
		 }
		 // 调用发送请求方法,参数页码
		 sendAJAX(pages);
		
 	  })
 	  
 	  // 页码
	 $(document).on("click","#current",function(){
		 // 获取当前显示的页码
		 var currentPageNum = $("#pageInfo").data("pagenum");	
		 // 获取当前超链接上表示的页码
		 var pageNum = $(this).text();
		 if(currentPageNum == pageNum){
			 return;
		 }
		// 调用发送请求方法,参数页码
		 sendAJAX(pageNum);		
 	  });
	 	
	// 清空输入框
		$("#clear-search-button").click(function(){
			$("#scenicName").val("");
			sendAJAX(1);
		});
	
	
	//对详情设置点击事件
	 $(document).on("click","#scenicDetail",function(){
		 var scenicName = $("#spanScenicName").val();
		 var scenicPrice = $("#spanScenicPrice").val();
		 var scenicPicture = $("#imgScenicPicture").val();
		 var url = "scenic-detail.jsp?scenicName="+scenicName+"&scenicPrice="+scenicPrice+"&scenicPicture="+scenicPicture;
		 Request.Redirect(url);
	 });
	
	//对收藏按钮设置点击事件
	$(document).on("click","#btnGallery",function(){
		var scenicId=$(this).data("scenicid");
		
		
			$.ajax({
		   		 async:true,
		   		 type:"get",
		   		 url:"${pageContext.request.contextPath}/scenic",
		   		 data:{
		   			 op:"insertGallery",
		   			 scenicId:scenicId,
		   			 userId:"${sessionScope.user.userId}"
		   		 },
		   		 success:function(result){
		   			 console.log(result);
		   			 if("success"== result){
		   				alert("收藏成功!");
		   			 }else{
		   				alert("该景点已经被收藏了!");
		   			 }
		   			
		   		 },
		   		 error:function(){
		   			 alert("异步请求失败!");
		   		 }
		   	 });
	});
	
	 $(document).on("click","#btnLogout",function(){
			location.href = "${pageContext.request.contextPath}/front/userLogin.jsp";
		});
	
});		 
	// 发送AJAX请求 
    function sendAJAX(pageNum){
    	
		 // 获取输入关键字
		 var keyword = $("#scenicName").val();	 
    	 $.ajax({
    		 async:true,
    		 type:"get",
    		 url:"${pageContext.request.contextPath}/scenic",
    		 data:{
    			 op:"searchByPage",
    			 pageNum:pageNum,
    			 pageSize:6,
    			 keyword:keyword
    		 },
    		 dataType:"json",
    		 success:function(result){
    			// 调用渲染函数
    			 showData(result);
    		 },
    		 error:function(){
    			 alert("异步请求失败!");
    		 }
    	 });
	}
	//渲染数据到指定Dom元素
	function showData(result){
		var content = "";
		// 没有数据
		 if(result.data.length == 0){
			 $(".scenic").html("无相关数据");
			 $("#DataTables_Table_0_paginate").html("");
		 }else{
		//遍历结果集合
			 for(var i = 0; i < result.data.length; i++){
				 var scenic = result.data[i];
				 
				 content += "<div class=\"col-md-4\">"+
                 "<div class=\"flights-grid mb-xl-30\">"+
                 "<div class=\"flights-grid-wrapper bx-wrapper\">"+
                     "<div id=\"imgScenicPicture\" class=\"animate-img\">"+
                         "<a href=\"#\">"+
                             "<img src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+scenic.scenicPicture+"\" class=\"full-width\" alt=\"img\" style=\"height:200px \">"+
                         "</a>"+
                     "</div>"+
                     "<div class=\"flights-grid-caption padding-20 bg-custom-white p-relative\">"+
                         "<div class=\"heading-sec\">"+
                             "<div class=\"left-side\">"+
                                 "<div class=\"title\">"+
                                     "<h4 class=\"fs-16\">"+
                                         "<span id=\"spanScenicName\" class=\"text-light-dark\">"+scenic.scenicName+"</span>"+
                                     "</h4>"+
                                 "</div>"+
                             "</div>"+
                             "<div class=\"right-side\"><span id=\"spanScenicPrice\">￥"+scenic.scenicPrice+"</span>"+
                             "</div>"+
                         "</div>"+
                         "<div class=\"action\">"+
                             "<a id=\"scenicDetail\" class=\"btn-second btn-small\" href=\"scenic-detail.jsp?scenicPrice="+scenic.scenicPrice+"&scenicName='"+scenic.scenicName+"'&scenicPicture='"+scenic.scenicPicture+"'&scenicDesc='"+scenic.scenicDesc+"'&scenicId="+scenic.scenicId+"  \" tabindex=\"-1\">详情</a>"+
                             "<a class=\"btn-first btn-submit\" href=\"#\" tabindex=\"-1\" id=\"btnGallery\" data-scenicid=\""+scenic.scenicId+"\">收藏</a>"+
                         "</div>"+
                     "</div>"+
                 "</div>"+
             "</div>"+
       "</div>";
		 }
	 $("#showScenic").html(content);
	
	 //渲染分页信息
	 var pageInfo = "";
	 pageInfo = "<span style=\"margin-top:10px;\" id=\"pageInfo\" data-pagenum=\""+result.pageNum+"\"  data-pages=\""+result.pages+"\">每页"+result.pageSize+"条 共"+result.total+"条  第"+result.pageNum+"/"+result.pages+"页</span>";
	 if(result.pageNum == 1){
// 		 pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_first\" disabled=\"disabled\">首页</a>";
// 		 pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_previous\" disabled=\"disabled\" >上一页</a>";
	 	 pageInfo += " <li id=\"DataTables_Table_0_first\" class=\"page-item\"><a class=\"page-link\" href=\"#\" disabled=\"disabled\">首页</a></li>";
	 	 pageInfo += " <li id=\"DataTables_Table_0_previous\" class=\"page-item\"><a class=\"page-link\" href=\"#\" disabled=\"disabled\">上一页</a></li>";
	 }else{
		 //pageInfo += "<a tabindex=\"0\" class=\"first ui-corner-tl ui-corner-bl fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_first\" >首页</a>";
		 //pageInfo += "<a tabindex=\"0\" class=\"previous fg-button ui-button ui-state-default \" id=\"DataTables_Table_0_previous\"  >上一页</a>";
		 pageInfo += " <li id=\"DataTables_Table_0_first\" class=\"page-item\"><a class=\"page-link\" href=\"#\">首页</a></li>";
		 pageInfo += " <li id=\"DataTables_Table_0_previous\" class=\"page-item\"><a class=\"page-link\" href=\"#\">上一页</a></li>";
	 }

	 
	 for(var i = 1; i <= result.pages; i++){
		 // 设置当前的页面激活样式
		 if(result.pageNum == i){
			 //pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default ui-state-disabled current\"  >"+i+"</a>";
			 pageInfo += "<li id=\"current\" class=\"page-item active\"><a class=\"page-link\" href=\"#\">"+i+"</a></li>";
		 } else{
			 pageInfo += "<li id=\"current\" class=\"page-item\"><a class=\"page-link\" href=\"#\">"+i+"</a></li>";
			 //pageInfo += "<a tabindex=\"0\" class=\"fg-button ui-button ui-state-default current\" >"+i+"</a>";
		 }
	 }
	 
	 
		if(result.pageNum == result.pages){
			pageInfo +="<li id=\"DataTables_Table_0_next\" class=\"page-item\"><a class=\"page-link\" href=\"#\" disabled=\"disabled\">下一页</a></li>";
			pageInfo +="<li id=\"DataTables_Table_0_last\" class=\"page-item\"><a class=\"page-link\" href=\"#\" disabled=\"disabled\">尾页</a></li>";
		//pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_next\" disabled=\"disabled\">下一页</a>";
	    //pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default ui-state-disabled\" id=\"DataTables_Table_0_last\" disabled=\"disabled\">尾页</a>";
	}else{
		 //pageInfo += "<a tabindex=\"0\" class=\"next fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_next\">下一页</a>";
		 //pageInfo += "<a tabindex=\"0\" class=\"last ui-corner-tr ui-corner-br fg-button ui-button ui-state-default\" id=\"DataTables_Table_0_last\">尾页</a>";
		pageInfo +="<li id=\"DataTables_Table_0_next\" class=\"page-item\"><a class=\"page-link\" href=\"#\">下一页</a></li>";
		pageInfo +="<li id=\"DataTables_Table_0_last\" class=\"page-item\"><a class=\"page-link\" href=\"#\">尾页</a></li>";
	}
	 
	 $("#showPage").html(pageInfo);
	
	}	
	}

</script>
</html>